<template>
  <el-main>
    <!--          活动搜索筛选框-->
    <el-form ref="queryForm"
             :model="queryParams"
             :inline="true"
             label-width="68px"
             label-position="right">
      <el-form-item label="活动信息">
        <el-input v-model="queryParams.info"
                  clearable
                  size="small"
                  style="width: 160px"
                  @keyup.enter.native="onQueryTap" />
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker v-model="queryParams.create_time"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        style="width: 250px" />
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker v-model="queryParams.hold_time"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        style="width: 250px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="el-icon-search"
                   size="mini"
                   @click="onQueryTap">搜索</el-button>
        <el-button icon="el-icon-refresh"
                   size="mini"
                   @click="onResetTap">重置</el-button>
        <!--              <el-button icon="el-icon-microphone" size="mini" type="warning">只看我的</el-button>-->
      </el-form-item>
    </el-form>
    <!--新建活动，删除活动，发送提醒-->
    <el-row :gutter="10"
            class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"
                   plain
                   icon="el-icon-plus"
                   size="mini"
                   @click="new_activity_dialog_flag = true">新建活动</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger"
                   plain
                   icon="el-icon-delete"
                   size="mini"
                   @click="delete_activity">删除活动</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success"
                   plain
                   icon="el-icon-bell"
                   size="mini"
                   @click="operation_success">发送提醒</el-button>
      </el-col>
    </el-row>
    <!--          帖子列表-->
    <el-table v-loading="query_loading"
              :data="activity_list"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="50"
                       align="center" />
      <el-table-column label="活动标题"
                       align="center"
                       prop="title"
                       width="180" />
      <el-table-column label="活动时间"
                       align="center"
                       prop="time"
                       width="120" />
      <el-table-column label="活动地点"
                       align="center"
                       prop="place"
                       min-width="120" />
      <el-table-column label="发布人"
                       align="center"
                       prop="create_person"
                       width="100" />
      <el-table-column label="发布时间"
                       align="center"
                       prop="create_time"
                       width="120" />
      <el-table-column label="查看人数"
                       align="center"
                       prop="views"
                       width="50" />
      <el-table-column label="报名人数"
                       align="center"
                       prop="signs"
                       width="50" />
      <el-table-column label="参与人数"
                       align="center"
                       prop="joins"
                       width="50" />
      <el-table-column label="操作"
                       align="center"
                       width="180"
                       class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini"
                     type="text"
                     icon="el-icon-view"
                     @click="view_activity_dialog_flag = true"
          >查看</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-edit">编辑</el-button>
          <el-button v-if="scope.row.userId !== 1"
                     size="mini"
                     type="text"
                     icon="el-icon-delete"
                     @click="delete_activity"
          >删除</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-bell"
                     @click="operation_success">提醒</el-button>
          <el-button size="mini"
                     type="text"
                     icon="el-icon-circle-check"
                     @click="onSignTap">签到</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <pagination v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList" />
    <el-dialog :visible.sync="new_activity_dialog_flag" title="新建活动" center>
      <el-form
        :model="new_activity_info"
        label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="new_activity_info.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入活动介绍"
            v-model="new_activity_info.content">
          </el-input>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-date-picker
            v-model="new_activity_info.time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动地点">
          <el-input v-model="new_activity_info.place" placeholder="请输入地点"></el-input>
        </el-form-item>
      </el-form>
      <!--            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>-->
      <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="new_activity_dialog_flag = false">取 消</el-button>
            <el-button @click="create_activity"
                       plain
                       type="primary">创 建</el-button>
          </span>
    </el-dialog>
    <el-dialog :visible.sync="sign_dialog_flag" title="签到二维码" center>
      <div style="width: 100%; margin: 0 auto;">
        <div ref="qrCodeDiv" style="width: 40%; height: 250px; display: inline-block; vertical-align: top"></div>
<!--        <el-image-->
<!--          style="width: 40%; height: 250px; display: inline-block; vertical-align: top"-->
<!--          :src="sign_pic_url"-->
<!--          :fit="fill">-->
<!--        </el-image>-->
<!--        实时更新的签到列表-->
        <el-table
          :data="join_list"
          height="250"
          style="width: 60%; display: inline-block; vertical-align: top">
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="time"
            label="签到时间">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="sign_dialog_flag = false">关 闭</el-button>
          </span>
    </el-dialog>
    <el-dialog :visible.sync="view_activity_dialog_flag" title="活动详情" center>
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">标题: </div>
        </el-col>
        <el-col span="20">
          <div>测试测试测试测试</div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">活动介绍: </div>
        </el-col>
        <el-col span="20">
          <div>为纪念中国共产党建党100周年,以实际行动践行党员光荣职责<br>测试测试测试测试测试测试测<br>测试测试测试测试</div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">活动时间: </div>
        </el-col>
        <el-col span="8">
          <div style="font-size: large;">2021-7-1 9:30:00</div>
        </el-col>
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">活动地点: </div>
        </el-col>
        <el-col span="8">
          <div style="font-size: large;">绿洲小区羽毛球馆</div>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">报名列表: </div>
        </el-col>
        <el-col span="20">
          <el-table
            :data="sign_list"
            style="width: 100%"
            max-height="130px"
            :cell-style="{padding: '5px 0'}"
          >
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="报名时间"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 20px">
        <el-col span="4">
          <div style="font-size: large; font-weight: bolder; ">签到列表: </div>
        </el-col>
        <el-col span="20">
          <el-table
            :data="join_list"
            style="width: 100%"
            max-height="150px"
            :cell-style="{padding: '5px 0'}"
          >
            <el-table-column
              type="index"
              width="50">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="签到时间"
            >
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="view_activity_dialog_flag = false">关 闭</el-button>
          </span>
    </el-dialog>
  </el-main>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: "activity",
  data() {
    return {
      new_activity_dialog_flag: false,
      sign_dialog_flag: false,
      view_activity_dialog_flag: false,
      query_loading: false,
      total: 1,
      sign_pic_url: 'https://z3.ax1x.com/2021/07/07/R7cj9H.jpg',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        create_time: undefined,
        hold_time: undefined,
        info: undefined
      },
      activity_list: [
        {
          activity_id: '202107010013',
          title: '建党百年合唱活动',
          time: '2021-7-1',
          place: '海淀区剧院',
          create_time: '2021-6-10',
          create_person: '党支部书记',
          views: 319,
          signs: 25,
          joins: 23
        }
      ],
      new_activity_info: {
        title: '',
        content: '',
        time: '',
        create_time: '',
        place: '',
        creater: ''
      },
      sign_list: [
        {
          name: '郑成河',
          time: '2021-6-15 15:19:18'
        },
        {
          name: '李达',
          time: '2021-6-16 15:19:18'
        },
        {
          name: '沈琳',
          time: '2021-6-15 15:19:18'
        },
        {
          name: '李达',
          time: '2021-6-16 15:19:18'
        },
        {
          name: '郑成河',
          time: '2021-6-15 15:19:18'
        },
        {
          name: '李达',
          time: '2021-6-16 15:19:18'
        },
        {
          name: '沈琳',
          time: '2021-6-15 15:19:18'
        },
        {
          name: '李达',
          time: '2021-6-16 15:19:18'
        },
      ],
      join_list: [],
    }
  },
  mounted() {
  },
  methods: {

    getList () {
      this.query_loading = true
      console.log('query')
      this.query_loading = false
    },

    create_activity(){
      this.new_activity_dialog_flag = false;
      this.$message({
        type: 'success',
        message: '创建活动成功!'
      });
    },

    onQueryTap () {
      this.queryParams.pageNum = 1
      this.getList()
    },

    resetMemberQuery () {
      console.log('reset query info')
    },

    delete_activity(){
      this.$confirm('该活动将被删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    operation_success(){
      this.$message({
        type: 'success',
        message: '操作成功!'
      });
    },

    handleSelectionChange () {
      console.log('select user')
    },

    // 生成二维码
    bindQRCode () {
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'https://www.baidu.com',
        width: 250,
        height: 250,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    },
    // 点击签到按钮，弹出框展示签到二维码
    onSignTap() {
      this.sign_dialog_flag = true;
      this.$nextTick(function () {
        setTimeout(() => {
          var qrcode = this.bindQRCode()
        }, 500);
      }
    )},
  }
}
</script>

<style scoped>

</style>
